<template>
<div class="edit_user_name">
    <head-top :headTitle="title" :go-back='true'></head-top>
    <div class="center">
        <div class="edit_wrap clear">
            <label for="user_name_ipt">昵称：</label>
            <input :class={bor_red:borderColor} @input="inputThing" id="user_name_ipt" type="text" autofocus="autofocus" v-model.trim="userName"  @keyup.enter="saveUserName" />
            <p class="tip" :class={color_red:tipColor}>长度在2~20之间</p>
        </div>
        <div class="btn_wrap">
            <div class="btn" :class="{color_69d6c6:btnColor,bor_69d6c6:btnBorderColor,even_none:eventNone}" @click="saveUserName">确定修改</div>
        </div>
    </div>
    <!-- <tip-layer :conf="tipConf"></tip-layer> -->
</div>
</template>

<script>
import Bus from "@/components/bus.js";

export default {
    name: "EditUserName",
    data() {
        return {
            user: '',
            userName: "",
            newName: "请输入用户名",
            title: "修改用户名",
            btnColor: false,
            borderColor: false,
            btnBorderColor: false,
            tipColor: false,
            eventNone: true,
            showTip:false,
            tipConf: {
              isShow:false,
              tipMsg: "測試彈窗",
            }

        };
    },
    mounted: function () {
        this.$nextTick(function () {
            var that = this;
            var userInfo = this.$route.params;
            that.user = userInfo.user;
            that.userName = userInfo.userName;
        });
    },
    methods: {
        saveUserName() {
            this.$axios
                .put(`/api/wzg/updataUserName/${this.user}`, {
                    userName: this.userName
                })
                .then(res => {
                    if (res.status == 200) {
                        console.log("更新成功");
                        console.log(res)
                        this.$zg_message({
                          message:'修改成功',
                          type:1,
                          time:2000
                        });
                        this.eventNone = true;
                        this.btnColor = false;
                        this.btnBorderColor = false;
                        Bus.$emit('updateData', "userName", res.data);
                        // this.$router.go(-1);
                        // this.$router.replace({ path: '/user/userInfo' })
                    }
                })
                .catch(err => {
                        this.$zg_message({
                          message:'修改失败',
                          type:0,
                          time:2000
                        });
                    console.log(err);
                });
        },
        inputThing() {
            var len = this.userName.length;
            if (len < 2 || len > 20) {
                this.btnColor = false;
                this.borderColor = true;
                this.btnBorderColor = false;
                this.tipColor = true;
                this.eventNone = true;
            } else {
                this.btnColor = true;
                this.borderColor = false;
                this.btnBorderColor = true;
                this.tipColor = false;
                this.eventNone = false;
            }
        }
    },
    components: {}
};
</script>

<style lang="css" scoped>
.edit_user_name {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    background: #fafafa;
    z-index: 201;
}

.edit_user_name .determine_btn {
    color: #69d6c6;
}

.edit_user_name .edit_wrap {
    position: relative;
    width: 100%;
    line-height: 32px;
    padding-top: 34px;
    margin-top: 20px;
}

.edit_user_name .edit_wrap label {
    position: absolute;
    left: 5px;
}

.edit_user_name .edit_wrap input {
    width: 100%;
    height: 32px;
    outline: none;
    border: 1px solid #666;
    overflow: hidden;
    float: left;
    padding-left: 40px;
    background: #fafafa;
}

.edit_user_name .edit_wrap input:focus {
    border: 1px solid #69d6c6;
}

.edit_user_name .edit_wrap .tip {
    float: left;
}
</style>
